<template>
  <a-layout v-if="key">
    <a-layout-header class="header">
      <div class="logo" />
      <div class="right">
        <li class="search"><SearchOutlined />搜索</li>
        <li><DesktopOutlined /></li>
        <li><DesktopOutlined /></li>
        <li><DesktopOutlined /></li>
        <li class="user"><DesktopOutlined />lifei</li>
        <li><DesktopOutlined /></li>
      </div>
    </a-layout-header>
    <div class="navBig">
      <div class="nav">
        <a-tabs>
          <a-tab-pane key="1" tab="Tab 1"
            ><a-layout>
              <a-layout-sider
                width="200"
                style="background: #fff"
                v-model:collapsed="collapsed"
                :trigger="null"
                collapsible
              >
                <div class="tog">
                  <span> gagag</span>
                  <span class="anticon">
                    <menu-unfold-outlined
                      v-if="collapsed"
                      class="trigger"
                      @click="() => (collapsed = !collapsed)" />
                    <menu-fold-outlined
                      v-else
                      class="trigger"
                      @click="() => (collapsed = !collapsed)"
                  /></span>
                </div>
                <a-menu
                  mode="inline"
                  v-model:selectedKeys="selectedKeys2"
                  v-model:openKeys="openKeys"
                  :style="{ height: '100%', borderRight: 0 }"
                >
                  <a-sub-menu key="sub1">
                    <template #icon>
                      <DesktopOutlined />
                    </template>
                    <template #title>Navigation One</template>
                    <a-menu-item key="9">全部项目</a-menu-item>
                    <a-menu-item key="10" @click="searchProject"
                      >星标项目</a-menu-item
                    >
                    <div class="line"></div>
                    <a-menu-item-group key="g1">
                      <template #icon>
                        <UserOutlined />
                      </template>
                      <template #title
                        >项目分组<PlusOutlined class="plus" @click="plus"
                      /></template>
                      <a-menu-item
                        :key="option.id"
                        v-for="option in store.options"
                        ><span
                          v-if="editIndex !== option.id"
                          @dblclick="edit(option.id)"
                          >{{ option.content }}</span
                        >
                        <input
                          type="text"
                          class="input"
                          v-model="option.content"
                          v-else
                          @keyup.enter="editSuccess"
                        />
                      </a-menu-item>
                    </a-menu-item-group>
                  </a-sub-menu>
                </a-menu>
              </a-layout-sider>
              <a-layout style="padding: 0 24px 24px">
                <div class="nav1">
                  <a-breadcrumb style="margin: 16px 0">
                    <a-breadcrumb-item>App</a-breadcrumb-item>
                  </a-breadcrumb>
                  <div class="newCreate" @click="createProject">
                    <PlusOutlined />新建项目
                  </div>
                </div>
                <a-layout-content
                  :style="{
                    background: '#fff',
                    padding: '24px',
                    margin: 0,
                    minHeight: '280px',
                  }"
                >
                  <a-input
                    placeholder="项目名称（按enter搜索）"
                    v-model:value="name"
                    @keyup.enter="searchname"
                  >
                    <template #prefix>
                      <SearchOutlined />
                    </template>
                    <template #suffix>
                      <a-tooltip title="Extra information"> </a-tooltip>
                    </template> </a-input
                  ><a-select
                    v-model:value="project"
                    @change="searchProject"
                    style="width: 120px; margin-left: 20px; margin-bottom: 20px"
                    :options="
                      ['全部项目', '星标项目'].map((pro) => ({ value: pro }))
                    "
                  >
                  </a-select>
                  <a-select
                    v-model:value="customerName"
                    @change="searchcutom"
                    style="width: 120px; margin-left: 20px"
                    :options="optionsCustom.map((city) => ({ value: city }))"
                  >
                  </a-select>
                  <div style="float: right">
                    <span>共{{ total }}个项目</span> |
                    <span
                      >排序
                      <a-popover placement="bottomRight">
                        <template #content>
                          <p @click="timePositive">创建时间正序</p>
                          <p @click="flashback" style="margin-bottom: 0px">
                            创建时间倒序
                          </p>
                        </template>
                        <OrderedListOutlined /> </a-popover
                    ></span>
                  </div>
                  <DataTable @handle="handle" :data-source="data1" />
                </a-layout-content>
              </a-layout> </a-layout
          ></a-tab-pane>
          <a-tab-pane key="2" tab="Tab 2">2</a-tab-pane>
          <a-tab-pane key="3" tab="Tab 3">3</a-tab-pane>
        </a-tabs>
        <div class="arrow" @click="changeNav">
          <UpOutlined style="color: white" />
        </div>
      </div>
    </div>
  </a-layout>
  <a-modal
    v-model:visible="modal2Visible"
    title="新建项目"
    centered
    okText="确定"
    cancelText="取消"
    @ok="onSubmit"
  >
    <a-form ref="formRef" :model="formState" :rules="rules" layout="vertical">
      <a-form-item label="项目名称：" name="name">
        <a-input v-model:value="formState.name" placeholder="不超过60个字节" />
      </a-form-item>
      <div class="flex">
        <a-form-item label="项目时间：" name="startTime">
          <a-date-picker
            v-model:value="formState.startTime"
            type="date"
            :disabled-date="disabledStartDate"
            placeholder="请选择项目开始时间" /></a-form-item
        ><a-form-item label="" name="endTime">
          <br />
          <a-space></a-space>
          <a-date-picker
            type="date"
            style="margin-top: 5px"
            :disabled-date="disabledEndDate"
            v-model:value="formState.endTime"
            placeholder="请选择项目结束时间"
          />
        </a-form-item>
      </div>
      <div class="flex">
        <a-form-item label="客户名称：" name="custom">
          <a-input
            v-model:value="formState.custom"
            placeholder="请填写客户名称"
          />
        </a-form-item>
        <a-form-item label="所属分组：">
          <a-select>
            <a-select-option
              v-for="option in store.options"
              :value="option.content"
              :key="option.id"
              v-model:value="formState.group"
              >{{ option.content }}</a-select-option
            >
          </a-select>
        </a-form-item>
      </div>
      <a-form-item label="项目描述">
        <a-textarea v-model:value="formState.desc" />
      </a-form-item>
      <div class="flex">
        <a-form-item label="项目负责人" name="person">
          <div class="cir" @click="pushPerson">
            <UserAddOutlined />
          </div>
          <a-space v-model:value="formState.person"> {{ persons }}</a-space>
        </a-form-item>
        <a-form-item label="项目成员">
          <div class="cir"><UserAddOutlined /></div>
        </a-form-item>
      </div>
    </a-form>
  </a-modal>
  <a-modal
    v-model:visible="modal2Visible1"
    title="项目负责人"
    centered
    okText="确定"
    cancelText="取消"
    @ok="onSubmit1"
  >
    <div class="flex">
      <div style="border-right: 1px solid; padding-right: 10px">
        <a-input
          placeholder="Search"
          v-model:value="userName"
          style="width: 100% !important"
        >
          <template #suffix>
            <SearchOutlined></SearchOutlined>
          </template>
        </a-input>
        <a-tree
          checkable
          :tree-data="treeData"
          v-model:expandedKeys="expandedKeys"
          v-model:selectedKeys="selectedKeys"
          v-model:checkedKeys="checkedKeys"
          @click="select"
          @expand="onExpand"
          :auto-expand-parent="autoExpandParent"
        >
          <template #title="{ title }">
            <span v-if="title.indexOf(userName) > -1">
              {{ title.substr(0, title.indexOf(userName)) }}
              <span style="color: #f50">{{ userName }}</span>
              {{ title.substr(title.indexOf(userName) + userName.length) }}
            </span>
            <span v-else>{{ title }}</span>
          </template>
        </a-tree>
      </div>
      <div>
        已选择({{ selectNum }})<br />
        <li
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
          v-if="showPer"
        >
          <div
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
            "
          >
            <div
              class="cir"
              style="
                width: 50px;
                height: 50px;
                background: skyblue;
                margin-right: 5px;
              "
            >
              {{ selectdata1 }}
            </div>
            {{ selectdata1 }}
          </div>
          <div style="font-size: 20px; cursor: pointer" @click="del">x</div>
        </li>
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts">
import moment from "moment";
import DataTable from "./components/table.vue";
import { TreeDataItem } from "ant-design-vue/es/tree/Tree";
import "./assets/css/app.less";
const treeData: TreeDataItem[] = [
  {
    title: "parent 1",
    key: "0-0",
    disabled: true,
    children: [
      {
        title: "test",
        key: "test",
      },
      { title: "leaf", key: "0-0-2", disableCheckbox: true },
    ],
  },
];

import { useStore } from "./store/store";

import {
  UserOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UpOutlined,
  SearchOutlined,
  UserAddOutlined,
  PlusOutlined,
  DesktopOutlined,
  OrderedListOutlined,
} from "@ant-design/icons-vue";
import {
  computed,
  defineComponent,
  ref,
  reactive,
  watch,
  getCurrentInstance,
} from "vue";

import "ant-design-vue/dist/antd.css";
export default defineComponent({
  components: {
    DataTable,
    UserOutlined,
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    UpOutlined,
    SearchOutlined,
    DesktopOutlined,
    PlusOutlined,
    OrderedListOutlined,
    UserAddOutlined,
  },
  methods: {
    createProject() {
      this.modal2Visible = !this.modal2Visible;
    },
    pushPerson() {
      this.modal2Visible1 = !this.modal2Visible1;
    },
    changeNav() {
      if (
        document.querySelector(".ant-tabs-nav").classList.contains("disNone")
      ) {
        document.querySelector(".ant-tabs-nav").classList.remove("disNone");
      } else {
        document.querySelector(".ant-tabs-nav").classList.add("disNone");
      }
      if (document.querySelector(".arrow").classList.contains("arrpos")) {
        document.querySelector(".arrow").classList.remove("arrpos");
      } else {
        document.querySelector(".arrow").classList.add("arrpos");
      }
    },
    dblikc() {
      this.input1 = true;
    },
    edit(index: string) {
      this.editIndex = index;
    },
    plus() {
      this.store.options.push({
        id: this.store.options.length + 1,
        content: "option" + (this.store.options.length + 1),
      });
      sessionStorage.setItem("groups", JSON.stringify(this.store.options));
    },
    editSuccess() {
      this.editIndex = "0";
      sessionStorage.setItem("groups", JSON.stringify(this.store.options));
      location.reload();
    },
  },
  setup() {
    const store = useStore();
    const instance = getCurrentInstance();
    const rules = {
      name: {
        required: true,
        message: "请填写项目名称",
      },
      custom: {
        required: true,
        message: "请填写客户名称",
      },
      startTime: {
        required: true,
        message: "请选择开始时间",
      },
      endTime: {
        required: true,
        message: "请选择结束时间",
      },
      person: {
        required: true,
        message: "请选择项目负责人",
      },
    };
    let formState = reactive({
      name: "",
      custom: undefined,
      group: undefined,
      startTime: undefined,
      star: false,
      createTime: moment(new Date().toLocaleString()).format("YYYY-MM-DD"),
      projectPerson: "1",
      status: "1",
      createPerson: "1",
      endTime: undefined,
      person: undefined,
    });
    let total;
    const handle = (e) => {
      data1.value = e.value;
      total = computed({
        get() {
          return data1.value.length;
        },
        set() {
          return data1.value.length;
        },
      });
    };

    if (sessionStorage.getItem("groups")) {
      store.options = JSON.parse(
        JSON.parse(JSON.stringify(sessionStorage.getItem("groups")))
      );
    }

    const name = ref<string>("");

    const expandedKeys = ref<string[]>(["0-0-0", "0-0-1"]);
    const selectedKeys = ref<string[]>(["0-0-0", "0-0-1"]);
    const checkedKeys = ref<string[]>(["0-0-0", "0-0-1"]);
    let selectdata1 = ref();
    let selectNum = ref();
    let flag = true;
    let showPer = ref(false);
    function del() {
      flag = false;
      showPer.value = !showPer.value;
      checkedKeys.value = [];
    }
    watch(checkedKeys, () => {
      selectNum.value = checkedKeys.value.length;

      showPer.value = !showPer.value;
      if (flag == false) showPer.value = false;
      flag = true;
      selectdata1.value = checkedKeys.value[0];
    });
    function searchname() {
      data1.value = data1.value.filter((e) => {
        if (project.value && customerName.value) {
          return (
            e.name == name.value &&
            e.custom == customerName.value &&
            e.star == false
          );
        }
        if (customerName.value) {
          return e.custom == customerName.value && e.name == name.value;
        }
        return e.name == name.value;
      });
    }
    const disabledEndDate = (endValue) => {
      if (!formState.startTime || !endValue) {
        return false;
      }

      return formState.startTime.valueOf() >= endValue.valueOf();
    };
    const disabledStartDate = (startValue) => {
      if (!startValue || !formState.endTime) {
        return false;
      }

      return startValue.valueOf() > formState.endTime.valueOf();
    };
    const formRef = ref();
    let modal2Visible = ref(false);
    const onSubmit = () => {
      formRef.value.validate().then(() => {
        modal2Visible.value = false;
        formState.startTime = moment(
          formState.startTime.$d.toLocaleString()
        ).format("YYYY-MM-DD");
        formState.endTime = moment(
          formState.endTime.$d.toLocaleString()
        ).format("YYYY-MM-DD");
        optionsCustom.value.push(formState.custom);

        data1.value.push(formState);
        sessionStorage.setItem("data", JSON.stringify(data1.value));
        location.reload();
      });
    };
    const dataSource = [
      {
        name: "test",
        group: store.options[0].content,
        person: "1111111",
        custom: "服务客户",
        projectPerson: "张三",
        status: "进行中",
        startTime: "2020-2-8",
        endTime: "2020-2-8",
        createPerson: "515",
        createTime: "2020-06-09",
        star: true,
      },
      {
        name: "test",
        group: store.options[0].content,
        person: "1111111",
        custom: "服务客户",
        projectPerson: "张三",
        status: "进行中",
        startTime: "2020-2-8",
        star: false,
        endTime: "2020-2-8",
        createPerson: "515",
        createTime: "2020-06-09",
      },
      {
        name: "test",
        group: store.options[0].content,
        person: "1111111",
        star: false,
        custom: "服务客户",
        projectPerson: "张三",
        status: "进行中",
        startTime: "2020-2-8",
        endTime: "2020-2-8",
        createPerson: "515",
        createTime: "2020-06-09",
      },
      {
        name: "test",
        group: store.options[0].content,
        person: "1111111",
        star: false,
        custom: "服务客户",
        projectPerson: "张三",
        status: "进行中",
        startTime: "2020-2-8",
        endTime: "2020-2-8",
        createPerson: "515",
        createTime: "2020-06-09",
      },
      {
        star: false,
        name: "test",
        group: store.options[1].content,
        person: "1111111",
        custom: "服务客户",
        projectPerson: "张三",
        status: "进行中",
        startTime: "2020-2-8",
        endTime: "2020-2-8",
        createPerson: "515",
        createTime: "2020-06-09",
      },
      {
        name: "test",
        star: false,
        group: store.options[1].content,
        person: "1111111",
        custom: "服务客户",
        projectPerson: "张三",
        status: "进行中",
        startTime: "2020-2-8",
        endTime: "2020-2-8",
        createPerson: "515",
        createTime: "2020-06-09",
      },
      {
        star: false,
        name: "4",
        group: store.options[1].content,
        person: "1111111",
        custom: "服务客户",
        projectPerson: "张三",
        status: "进行中",
        startTime: "2020-2-8",
        endTime: "2020-2-8",
        createPerson: "515",
        createTime: "2020-06-09",
      },
      {
        name: "test",
        star: false,
        group: store.options[1].content,
        person: "1111111",
        custom: "服务客户",
        projectPerson: "张三",
        status: "进行中",
        startTime: "2020-2-8",
        endTime: "2020-2-8",
        createPerson: "515",
        createTime: "2020-06-09",
      },
      {
        name: "test",
        star: false,
        group: store.options[1].content,
        person: "1111111",
        custom: "服务客户",
        projectPerson: "张三",
        status: "进行中",
        startTime: "2020-2-8",
        endTime: "2020-2-8",
        createPerson: "515",
        createTime: "2020-06-09",
      },
      {
        name: "test",
        group: store.options[1].content,
        person: "1111111",
        star: true,
        custom: "服务客户",
        projectPerson: "张三",
        status: "进行中",
        startTime: "2020-2-8",
        endTime: "2020-2-8",
        createPerson: "515",
        createTime: "2020-06-10",
      },
      {
        name: "test",
        group: store.options[1].content,
        person: "1111111",
        custom: "服务客户",
        projectPerson: "张三",
        status: "进行中",
        startTime: "2020-2-8",
        star: false,
        endTime: "2020-2-8",
        createPerson: "515",
        createTime: "2020-06-04",
      },
      {
        name: "test",
        group: store.options[1].content,
        person: "1111111",
        custom: "服务客户",
        projectPerson: "张三",
        status: "进行中",
        startTime: "2020-2-8",
        endTime: "2020-2-8",
        star: false,
        createPerson: "515",
        createTime: "2020-06-09",
      },
      {
        name: "1",
        group: store.options[1].content,
        person: "1111111",
        custom: "服务客户",
        projectPerson: "张三",
        status: "进行中",
        star: false,
        startTime: "2020-2-8",
        endTime: "2020-2-8",
        createPerson: "515",
        createTime: "2020-06-09",
      },
      {
        name: "test",
        group: store.options[1].content,
        person: "1111111",
        custom: "服客户",
        star: false,
        projectPerson: "张三",
        status: "进行中",
        startTime: "2020-2-8",
        endTime: "2020-2-8",
        createPerson: "515",
        createTime: "2020-06-09",
      },
      {
        name: "test",
        group: store.options[1].content,
        person: "1111111",
        custom: "服务客户",
        projectPerson: "张三",
        status: "进行中",
        startTime: "2020-2-8",
        star: false,
        endTime: "2020-2-8",
        createPerson: "515",
        createTime: "2020-06-09",
      },
      {
        name: "test",
        group: store.options[1].content,
        person: "1111111",
        custom: "服务客户",
        projectPerson: "张三",
        status: "进行中",
        startTime: "2020-2-8",
        star: false,
        endTime: "2020-2-8",
        createPerson: "515",
        createTime: "2020-06-09",
      },
      {
        name: "test",
        group: store.options[1].content,
        person: "1111111",
        custom: "服务客户",
        projectPerson: "张三",
        status: "进行中",
        star: false,
        startTime: "2020-2-8",
        endTime: "2020-2-8",
        createPerson: "515",
        createTime: "2020-06-09",
      },
      {
        name: "test",
        group: store.options[1].content,
        person: "1111111",
        custom: "服务客户",
        projectPerson: "张三",
        status: "进行中",
        startTime: "2020-2-8",
        star: false,
        endTime: "2020-2-8",
        createPerson: "515",
        createTime: "2020-06-09",
      },
      {
        name: "test",
        group: store.options[1].content,
        person: "1111111",
        custom: "服务客户",
        projectPerson: "张三",
        status: "进行中",
        startTime: "2020-2-8",
        star: false,
        endTime: "2020-2-8",
        createPerson: "515",
        createTime: "2020-06-09",
      },
      {
        name: "test",
        group: store.options[1].content,
        person: "1111111",
        custom: "服务客户",
        star: false,
        projectPerson: "张三",
        status: "进行中",
        startTime: "2020-2-8",
        endTime: "2020-2-8",
        createPerson: "515",
        createTime: "2020-06-09",
      },
      {
        name: "test",
        group: store.options[1].content,
        person: "1111111",
        custom: "服务客户",
        star: false,
        projectPerson: "张三",
        status: "进行中",
        startTime: "2020-2-8",
        endTime: "2020-2-8",
        createPerson: "515",
        createTime: "2020-06-09",
      },
      {
        name: "test",
        group: store.options[1].content,
        person: "1111111",
        custom: "服务客户",
        projectPerson: "张三",
        star: false,
        status: "进行中",
        startTime: "2020-2-8",
        endTime: "2020-2-8",
        createPerson: "515",
        createTime: "2020-06-09",
      },
      {
        name: "test",
        group: store.options[1].content,
        person: "1111111",
        custom: "服务客户",
        projectPerson: "张三",
        star: false,
        status: "进行中",
        startTime: "2020-2-8",
        endTime: "2020-2-8",
        createPerson: "515",
        createTime: "2020-06-09",
      },
      {
        name: "test",
        group: store.options[1].content,
        person: "1111111",
        custom: "服务客户",
        projectPerson: "张三",
        status: "进行中",
        star: false,
        startTime: "2020-2-8",
        endTime: "2020-2-8",
        createPerson: "515",
        createTime: "2020-06-09",
      },
      {
        name: "test",
        group: store.options[1].content,
        person: "1111111",
        custom: "服务客户",
        projectPerson: "张三",
        status: "已结束",
        startTime: "2020-2-8",
        endTime: "2020-2-8",
        star: false,
        createPerson: "515",
        createTime: "2020-06-09",
      },
      {
        name: "test",
        group: store.options[1].content,
        person: "1111111",
        custom: "服务客户",
        projectPerson: "张三",
        status: "已延期",
        startTime: "2020-2-8",
        endTime: "2020-2-8",
        star: false,
        createPerson: "515",
        createTime: "2020-06-09",
      },
    ];
    let data1 = ref(dataSource);
    const optionsCustom = ref(["服务客户", "服客户"]);
    let persons = ref();
    let modal2Visible1 = ref(false);
    const onSubmit1 = () => {
      persons.value = selectdata1.value;
      modal2Visible1.value = false;
      formState.person = persons.value;
    };
    const project = ref<string>("");
    function searchProject() {
      data1.value = data1.value.filter((e) => {
        if (project.value) {
          if (project.value == "星标项目") {
            let a1 = false;
            if (name.value && customerName.value) {
              return (
                e.star == a1 &&
                e.name == name.value &&
                e.custom == customerName.value
              );
            }
            if (customerName.value) {
              return e.star == a1 && e.custom == customerName.value;
            }
            if (name.value) return e.name == name.value;
            return e.star == a1;
          } else {
            if (name.value && customerName.value) {
              return e.custom == customerName.value && e.name == name.value;
            }
            if (name.value) {
              return e.name == name.value;
            }
            if (customerName.value) return e.custom == customerName.value;
            return e;
          }
        }

        return e.star == false;
      });
    }
    const customerName = ref<string>("");
    function searchcutom() {
      data1.value = data1.value.filter((e) => {
        if (name.value && project.value) {
          return e.name == name.value && e.custom == customerName.value;
        }
        if (project.value) {
          return e.custom == customerName.value && e.star == false;
        }
        if (name.value)
          return e.name == name.value && e.custom == customerName.value;
        return e.custom == customerName.value;
      });
    }
    function timePositive() {
      data1.value.sort((a, b): any => {
        return a.createTime > b.createTime ? 1 : -1;
      });
    }
    if (sessionStorage.getItem("data")) {
      data1.value = JSON.parse(
        JSON.parse(JSON.stringify(sessionStorage.getItem("data")))
      );
    }
    function flashback() {
      data1.value.sort((a, b): any => {
        return a.createTime < b.createTime ? 1 : -1;
      });
    }
    const getParentKey = (key: string, tree): any => {
      let parentKey;
      for (let i = 0; i < tree.length; i++) {
        const node = tree[i];
        if (node.data1ren) {
          if (node.data1ren.some((item) => item.key === key)) {
            parentKey = node.key;
          } else if (getParentKey(key, node.data1ren)) {
            parentKey = getParentKey(key, node.data1ren);
          }
        }
      }
      return parentKey;
    };

    const onExpand = (keys: string[]) => {
      expandedKeys.value = keys;
      autoExpandParent.value = false;
    };
    const userName = ref<string>("");
    const autoExpandParent = ref<boolean>(true);
    watch(userName, (value) => {
      const expanded = treeData
        .map((item: TreeDataItem) => {
          console.log(item);

          return null;
        })
        .filter((item, i, self) => item && self.indexOf(item) === i);
      expandedKeys.value = expanded as string[];
      userName.value = value;
      autoExpandParent.value = true;
    });

    return {
      selectedKeys1: ref<string[]>(["2"]),
      selectedKeys2: ref<string[]>(["1"]),
      selectNum,
      handle,
      key: ref<boolean>(true),
      selectedInput1: ref<string>("分组一"),
      store,
      showPer,
      treeData,
      persons,
      selectdata1,
      expandedKeys,
      selectedKeys,
      checkedKeys,
      selectedInput2: ref<string>("分组二"),
      userName,
      timePositive,
      autoExpandParent,
      onSubmit,
      onSubmit1,
      onExpand,
      flashback,
      del,
      searchname,
      collapsed: ref<boolean>(false),
      input1: ref<boolean>(false),
      input2: ref<boolean>(false),
      name,
      project,
      instance,
      customerName,
      collapsed1: ref<boolean>(true),
      openKeys: ref<string[]>(["sub1"]),
      editIndex: ref<string>(""),
      modal2Visible,
      modal2Visible1,
      editingKey: "",
      total,
      formState,
      disabledStartDate,
      optionsCustom,
      rules,
      formRef,
      disabledEndDate,
      searchcutom,
      searchProject,
      data1,
    };
  },
});
</script>
<style lang="less">
.logo {
  float: left;
  width: 120px;
  height: 31px;
  margin: 16px 24px 16px 0;
  background: rgba(255, 255, 255, 0.3);
}

.ant-table-striped {
  tbody {
    color: rgb(102, 90, 90);
  }

  .table-striped {
    background-color: #fafafa;
  }
}

.ant-row-rtl #components-layout-demo-top-side-2 .logo {
  float: right;
  margin: 16px 0 16px 24px;
}

.site-layout-background {
  background: #fff;
}
.editable-row-operations a {
  margin-right: 8px;
}
</style>
